<template>
    <div class="meng-table-box">
        <div @click.stop class="newTable">
            <div class="meng-table-typeIn">
                <div>
                    行: &nbsp;&nbsp;<input type="text" style="width:30px" v-model="row">
                </div>
                <div>
                    列: &nbsp;&nbsp;<input type="text" style="width:30px" v-model="column">
                </div>
                <button class="" style="width:40px;margin-left:10px" @click.prevent.stop="insertTable">确定</button>
            </div>
            <div class="meng-table-tableList">
                <table>
                    <tr v-for="(row,key) in 10" :key="key">
                        <td v-for="(column,index) in  10" :key="index" 
                            @mouseover="selectTd(row,column,$event)"
                            @click="insertTable"
                            ref="mytd"
                        ></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from '../../mixins/index'
export default {
    name: 'table-box',
    mixins: [mixin],
    props: ['range','currentSelection'],
    data(){
        return {
            row: 5,
            column:5,
            isTable: false
        }
    },
    methods:{
        // 清空所有选中的颜色
        resetAll(){
            var mytd = this.$refs.mytd;
            mytd.forEach((item)=>{
                item.style.background = "white";
            });
            this.$parent.show =false;
        },
        insertTable(){
            var innerDom = this.range.extractContents();
            var table = document.createElement("table");
            table.className = "insertTable"
            table.setAttribute("cellspacing",0);
            table.setAttribute("border",0);
            table.style.cssText = `
                display: table;
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed;
            `
            for(let i=0;i<this.row;i++){
                var tr = document.createElement("tr");
                for(let j=0;j<this.column;j++){
                    var td = document.createElement("td");
                    td.style.cssText = `flex:1;empty-cells:show; border: 1px solid gray; height: 36px`;
                    td.innerHTML = "&nbsp;"
                    td.className = 'mtTableTd'
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            table.appendChild(innerDom);
            this.range.insertNode(table);
            // this.adjustList('.insertTable');
            this.resetAll();
            this.$parent.show = false
            this.restoreRange(this.currentSelection);
            this.$emit('selectmenu')
        },
        comfirmSelected(row,column,event){
            this.selectTd(row,column,event);
        },
        selectTd(row,column,event){
            var target = event.target;
            target.style.background="lightcyan";
            if(target.parentElement.nextElementSibling){
               this.nextElement(target.parentElement);
            }
            if(target.parentElement){
                this.preElement(target.parentElement,column)
            }
            this.row = row;
            this.column = column;
        },
        preElement(ele,i){
            var children = Array.from(ele.children);
            children.slice(0,i).forEach((item)=>{
                item.style.background = "lightcyan";
            })
            children.slice(i,children.length).forEach((item)=>{
                item.style.background = "white";
            })
            if(!ele.previousElementSibling){
                return;
            }else{
                this.preElement(ele.previousElementSibling,i);
            }
        },
        nextElement(ele){
            var children = Array.from(ele.children);
            children.slice(0,children.length).forEach((item)=>{
                item.style.background = "white";
            })
            if(!ele.nextElementSibling){
                return;
            }else{
                this.nextElement(ele.nextElementSibling);
            }
        },
    },
}
</script>

<style scoped>
.meng-table-box {
    width: 200px;
    /* height: 250px; */
    top: 10px;
    box-shadow: 0px 0px 2px 2px lightgray;
    background: white;
}
.meng-table-typeIn{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;
    font-size: 13px;
    /* height: 40px;
    line-height: 40px; */
}
.meng-table-typeIn input {
    padding: 2px;
    box-sizing: border-box;
}
.meng-table-tableList{
    width: 100%;
    height: 170px;
}
.meng-table-tableList table{
    width: 100%;
    height: 100%;
}
.meng-table-tableList table tr td {
    border: 1px solid lightblue;
}


</style>